<template>
  <div class="provingbox">
    <div class="proving common">
      <div class="tabs">
        <div class="tab" v-for="i in tags" :key="i.id">
          <button
            @click="tabClick(i)"
            :class="selectedTagsId === i.id ? 'tabsbtn' : ''">
            {{ i.name }}
          </button>
        </div>
      </div>
      <div class="main">
        <Share v-if="selectedTagsId === 2" />
        <Check v-else />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import Share from "./Share/index.vue";
import Check from "./Check/index.vue";
const tags = ref([
  { id: 1, name: "可信存证校验" },
  { id: 2, name: "分享查询" },
]);
const selectedTagsId = ref(1);
const tabClick = (i) => {
  selectedTagsId.value = i.id;
};
</script>

<style lang="less" scoped>
.provingbox {
  width: 100%;
  // height: 550px;
  .tabs {
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .tab {
      margin: 0 5px;
      width: 134px;
      height: 49px;
      button {
        width: 100%;
        height: 100%;
        border: 1px solid #0079fe;
        background-color: transparent;
        color: #0079fe;
      }
      .tabsbtn {
        background-color: #0079fe;
        color: white;
      }
    }
    .tab:hover button {
      cursor: pointer;
    }
  }
}
</style>